<template>
	<view class="container" v-if="show">
		<view class="swiper-boxs">
			<swiper class="swiper" :indicator-dots="swiperConfig.indicatorDots" :autoplay="swiperConfig.autoplay"
				swiperConfig :interval="swiperConfig.interval" :duration="swiperConfig.duration"
				:circular="swiperConfig.circular" :previous-margin="swiperConfig.previousMargin"
				:next-margin="swiperConfig.nextMargin" :current="curIndex">
				<swiper-item v-for="(item ,key) in ingList" :key="key">
					<view class="swiper-item uni-bg-red">
						<image class="logo" :src="item" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="shop-boxs mg-t-20">
			<view class="prices display-flex">
				<view class="now">
					现价￥<text class="num">{{dataInfo.discord}}</text>
				</view>
				<view class="old">
					原价￥<text class="num">{{dataInfo.amount}}</text>
				</view>
			</view>
			<view class="name">{{dataInfo.name}}</view>
			<view class="content">规格: {{dataInfo.standard}}</view>
			<view class="content-box card-box mg-t-20" v-if="dataInfo.productData&&dataInfo.productData.length>0">
				<view class="item display-flex" v-for="(item,key) in dataInfo.productData" :key="key">
					<view class="label">{{item.productName}}</view>
					<view class="value">{{item.count}}个</view>
				</view>
			</view>
			<image class="detail-img  mg-t-20" mode="widthFix" :style="{ height: imgHeight + 'px' }"
				:src="dataInfo.detailUrl" v-if="dataInfo.detailUrl" @load="loadImg" />
		</view>
		<view class="btn-box" @click="onBuy()">
			立即订购
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import utils from '/common/util.js'
	import AesTool from '/common/aes_util.js'
	import dayjs from 'dayjs';
	const id = ref('')
	const swiperConfig = {
		indicatorDots: false,
		autoplay: true,
		interval: 3000,
		duration: 300,
		circular: true,
		previousMargin: '0', // 两侧显示swiper宽度+二分之一两个swiper间隔宽度
		nextMargin: '0',
		circular: true,
		imageTip: '',
	}
	const curIndex = ref(0)
	const imgHeight = ref(240)
	const dataInfo = ref({})
	const ingList = ref([])
	const show = ref(false)
	const userInfo = ref(getApp().globalData.userInfo)
	const getData = (id) => {
		getApp().globalData.serviceApi({
			saleId: id
		}, 'getSaleInfoDetail', 'POST').then(res => {
			console.log('getSaleInfoDetail 响应结果', res)
			ingList.value = res.data.urlList
			dataInfo.value = res.data
			dataInfo.value.productData = res.data.productData && res.data.productData.length > 0 ? JSON.parse(
				res.data.productData) : []
		}).catch(error => {
			console.log('getSaleInfoDetail 响应异常', error)
			ingList.value = []
			dataInfo.value = {}
		})
		show.value = true
	}
	const onBuy = () => {
		if (!userInfo.value.addressCode || !userInfo.value.phone) {
			uni.showModal({
				title: '您的用户信息还未完善，请先完善您的信息',
				content: '',
				confirmText: '去完善',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
						uni.navigateTo({
							url: '/pages_other/setting'
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			return
		}
		uni.showModal({
			title: '确认购买吗?',
			content: '',
			success: function(res) {
				if (res.confirm) {
					console.log('用户点击确定');
					submit()
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const submit = () => {
		uni.showLoading({
			title: '下单中...',
			mask: true
		})
		// 登录
		getApp().globalData.serviceApi({
			saleId: id.value,
		}, "pay", 'POST').then(res => {
			uni.hideLoading()
			if (res.code !== 0) {
				uni.showToast({
					title: res.message ? res.message : '下单失败，请稍后重试',
					icon: 'none'
				})
				return
			}

			uni.requestPayment({
				timeStamp: res.data.timeStamp,
				nonceStr: res.data.nonceStr,
				package: res.data.packageVal,
				signType: res.data.signType,
				paySign: res.data.paySign,
				success(payRes) {
					//充值成功
					console.log('wxpayResult:', payRes);
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					});
					// 返回上一页
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages_other/my-card'
						})
					}, 500);
				},
				fail(payErr) {
					uni.showToast({
						title: '充值失败',
						icon: 'error'
					});
					console.log('wxPayFailed', payErr);
				}
			});
		}).catch(error => {
			uni.hideLoading()
			uni.showToast({
				title: error.message ? error.message : '下单失败，请稍后重试',
				icon: 'none'
			})
		})
		// })
	}
	const loadImg = (e) => {
		console.log('img', e)
		const {
			width,
			height
		} = e.detail;
		this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100
	}
	onLoad((option) => {
		console.log('******onMounted', option)
		console.log('组件已经挂载11')
		userInfo.value = getApp().globalData.userInfo
		id.value = option.id
		getData(option.id)
	})
</script>

<style lang="less" scoped>
	@import url("../common/common.css");

	.container {
		width: 100%;
		padding: 10rpx 10rpx 120rpx;

		.swiper-boxs {
			width: 100%;
			height: 547rpx;

			.swiper {
				height: 100%;
			}

			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 18rpx;
				overflow: hidden;

				image {
					// width: 100%;
					// height: inherit;
					width: 100%;
					height: 100%;
				}
			}
		}

		.card-box {
			background-color: aliceblue;
			border-radius: 12rpx;
			padding: 30rpx 0 26rpx;
		}

		.shop-boxs {
			padding-left: 20rpx;
			padding-right: 20rpx;

			.prices {
				font-size: 28rpx;
				color: #999;
				color: red;
				justify-content: flex-start;
				align-items: baseline;

				.now {
					.num {
						font-size: 42rpx;
						font-weight: bold;
					}
				}

				.old {
					padding-left: 26rpx;
				}
			}

			.name {
				font-size: 30rpx;
				color: #333;
				padding: 16rpx 0;
				font-weight: bold;
			}

			.content {
				font-size: 26rpx;
				color: #666;
			}

			.content-box {
				font-size: 26rpx;
				color: #666;
				padding: 20rpx 30rpx;

				.item {
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}
			}

		}

		.detail-img {
			width: 100%;
		}

		.btn-box {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #087bd6;
			text-align: center;
			color: #fff;
		}
	}
</style>